<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.17/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <div class="nav-top"></div>
        <div class="nav-search">
            <el-row :gutter="20">
                <el-col :span="12" :offset="6" class="nav-search-item">
                    <el-input class="search-input" v-model="input" clearable @change="search"></el-input>
                    <el-button class="search-button" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="nav-content">
            <el-row :gutter="20">
                <el-col :span="12" :offset="6" class="nav-content-item">
                    <el-tooltip v-for="(item, index) in content" :key="index" class="item" effect="dark" :content="item.title" placement="bottom-start">
                        <el-link :href="item.url" :underline="false" class="content-item" type="primary" target="_blank">
                            <el-image style="width: 20px; height: 20px" :src="item.icon"></el-image>{{item.title}}
                        </el-link>
                    </el-tooltip>
                </el-col>
            </el-row>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                input: undefined,
                content: [{
                    url: "http://zentao.ruidnet.com",
                    icon: "image/zentao.png",
                    title: "zentao"
                }, {
                    url: "http://jenkins.ruidnet.com/",
                    icon: "image/jenkins.png",
                    title: "jenkins"
                }, {
                    url: "http://kaoqin.ruidnet.com",
                    icon: "image/dingding.png",
                    title: "kaoqin"
                }, {
                    url: "https://element.eleme.cn/#/zh-CN/component/installation",
                    icon: "image/element-ui.png",
                    title: "element-ui"
                }, {
                    url: "https://cn.vuejs.org/v2/guide/",
                    icon: "image/vue.png",
                    title: "Vue.js"
                }, {
                    url: "https://vant-contrib.gitee.io/vant-weapp/#/intro",
                    icon: "image/vant-weapp.png",
                    title: "Vant Weapp"
                }, {
                    url: "https://www.apizza.net/project/be71e2e78ff080ba428959b60975e9e9/browse",
                    icon: "image/apizza.png",
                    title: "线下支付Api"
                }, {
                    url: "https://code.aliyun.com/",
                    icon: "image/code.png",
                    title: "code"
                }, {
                    url: "https://www.oschina.net/",
                    icon: "image/oschina.jpg",
                    title: "开源中国"
                }, {
                    url: "https://www.runoob.com/",
                    icon: "image/runoob.png",
                    title: "菜鸟教程"
                }, {
                    url: "https://github.com/",
                    icon: "image/github.png",
                    title: "github"
                }, {
                    url: "https://segmentfault.com/",
                    icon: "image/segmentfault.png",
                    title: "SegmentFault"
                }, {
                    url: "https://developers.weixin.qq.com/miniprogram/dev/framework/",
                    icon: "image/weixin.png",
                    title: "微信官方文档"
                }, {
                    url: "https://www.iconfont.cn/",
                    icon: "image/iconfont.png",
                    title: "iconfont"
                }, {
                    url: "https://cn.bing.com/translator/",
                    icon: "image/bing.ico",
                    title: "Bing翻译"
                }, {
                    url: "https://translate.google.cn/",
                    icon: "image/translate.png",
                    title: "谷歌翻译"
                }, {
                    url: "https://fanyi.baidu.com/",
                    icon: "image/baidu_fanyi.png",
                    title: "百度翻译"
                }, {
                    url: "http://fanyi.youdao.com/",
                    icon: "image/youdao_fanyi.png",
                    title: "有道翻译"
                }, {
                    url: "https://www.w3school.com.cn/index.html",
                    icon: "image/w3school.png",
                    title: "w3school"
                }, {
                    url: "https://www.imooc.com/",
                    icon: "image/imooc.png",
                    title: "慕课网"
                }, {
                    url: "https://v3.bootcss.com/css/",
                    icon: "image/bootstrap.jpg",
                    title: "bootstrap"
                }, {
                    url: "https://www.freecodecamp.one/",
                    icon: "image/freecodecamp.png",
                    title: "FreeCodeCamp"
                }, {
                    url: "https://uniapp.dcloud.io/component/README",
                    icon: "image/uni_app.png",
                    title: "uni-app"
                }, {
                    url: "https://ext.dcloud.net.cn/",
                    icon: "image/favicon.png",
                    title: "DCLOUD"
                }, {
                    url: "https://www.sxsoft.com/",
                    icon: "image/sxsoft.ico",
                    title: "sxsoft"
                }, {
                    url: "https://codemart.com/",
                    icon: "image/codemart.ico",
                    title: "码市"
                }, {
                    url: "https://www.jfh.com/",
                    icon: "image/jfh.png",
                    title: "解放号"
                }, {
                    url: "https://zb.oschina.net/projects/list.html",
                    icon: "image/projects.ico",
                    title: "开源众包"
                }, {
                    url: "https://org.modao.cc/brand",
                    icon: "image/modao.ico",
                    title: "墨刀"
                }, {
                    url: "https://www.swiper.com.cn/",
                    icon: "image/swiper.ico",
                    title: "swiper中文网"
                }, {
                    url: "https://www.html5plus.org/",
                    icon: "image/html5plus.ico",
                    title: "html5plus"
                }, {
                    url: "http://tool.chinaz.com/",
                    icon: "image/chinaz.ico",
                    title: "站长工具"
                }, {
                    url: "https://cn.bing.com/",
                    icon: "image/bing.ico",
                    title: "Bing搜索"
                }, {
                    url: "https://aws.amazon.com/cn/",
                    icon: "image/aws.ico",
                    title: "AWS云服务"
                }, {
                    url: "https://www.5tu.cn/colors/yansebiao.html",
                    icon: "image/5tu.ico",
                    title: "百图汇"
                }, {
                    url: "http://bj.91join.com/color.html",
                    icon: "image/91join.ico",
                    title: "配色器"
                }, {
                    url: "https://colorsupplyyy.com/app",
                    icon: "image/colorsupplyyy.png",
                    title: "撞色"
                }, {
                    url: "http://tool.c7sky.com/webcolor/",
                    icon: "image/c7sky.ico",
                    title: "配色表"
                }, {
                    url: "https://www.lanrenzhijia.com/",
                    icon: "image/lanrenzhijia.ico",
                    title: "懒人之家"
                }, {
                    url: "http://jianzhan.2ya.com.cn/",
                    icon: "image/mobanku.ico",
                    title: "模板库"
		        }, {
                    url: "https://lanhuapp.com/web/#/item",
                    icon: "image/lanhu.ico",
                    title: "蓝湖"
                }, ]
            },
            methods: {
                search() {
                    if (this.input === "") {
                        return false
                    }
                    window.open("https://www.baidu.com/s?wd=" + this.input)
                }
            }
        })
    </script>
</body>
<style>
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .nav-search {
        margin-top: 100px;
    }

    .nav-search-item {
        display: flex;
        flex-direction: row;
    }

    .nav-content {
        margin-top: 80px;
    }

    .nav-content-item {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .el-input__inner {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .search-button {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    .content-item {
        overflow: hidden;
        display: inline-block;
        white-space: nowrap;
        text-align: left;
        text-overflow: ellipsis;
        margin: 10px 10px 10px 0px;
        width: 120px;
    }
</style>

</html>
